<template>
  <section class="m-4">
    <el-card>
      <section slot="header">
        <el-button type="success" @click="handleDialogShow()" v-text="'新增'"/>
      </section>

      <el-table :data="tableData" border class="mx-4" stripe>
        <el-table-column label="认证类型" prop="name"/>
        <el-table-column label="资料数量" prop="count"/>
        <el-table-column label="添加时间" prop="created_at"/>
        <el-table-column label="启用状态" prop="is_visible">
          <template slot-scope="{row}">
            <el-tag v-if="row.is_visible === 1" type="success">启用</el-tag>
            <el-tag v-else type="info">不启用</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="{row}">
            <el-button plain type="primary" @click="handleDialogShow(row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        :page-size="15"
        :total="meta.total"
        background
        class="text-right mt-4"
        layout="prev, pager, next"
        @current-change="initData"
      />

    </el-card>

    <TCForm ref="tcForm" :init-data="initData"/>
  </section>
</template>

<script>
import TCForm from '@/views/anchorQuestion/comps/TCForm'
import { presenterSubjectCategory } from '@/api/KTV'

export default {
  name: 'typeOfCertification',
  components: {
    TCForm
  },
  data() {
    return {
      tableData: [],
      meta: {
        page: 1,
        total: 0
      }
    }
  },
  computed: {
    tcForm() {
      return this.$refs.tcForm
    }
  },
  created() {
    this.initData()
  },
  methods: {
    // 初始化数据
    async initData(page = 1) {
      try {
        const { data: { meta, list } } = await presenterSubjectCategory(page)
        this.meta.page = meta.page
        this.meta.total = meta.total
        this.tableData = list
      } catch (e) {

      }
    },
    handleDialogShow(row) {
      this.tcForm.show(row)
    }
  }
}
</script>

<style scoped>

</style>
